<div class="modal-header primary">
    <h5 class="modal-title" id="modal-title">
        EDIT <span class="capitalize">
            {{plugin.name.split("-").join(" ").toUpperCase()}}
        </span>
        <a  class="modal-close pull-right" ng-click="close()">
            <i class="mdi mdi-close"></i>
        </a>

    </h5>
</div>
<div class="col-md-12 bg-light-grey padding">

    <div class="form-group pull-right no-margin">
        <input

                bs-switch
                ng-model="plugin.enabled"
                switch-size="small"
                type="checkbox"
                switch-on-text="ENABLED"
                switch-off-text="DISABLED"
                ng-change="updateApi(api)"
        >
    </div>
    <p class="help-block" data-ng-bind-html="description"></p>

</div>
<div class="modal-body">
    <div class="alert alert-danger" ng-if="errors.config">
        <button type="button" class="close" ng-click="errors.config=null" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        {{errors.config}}
    </div>

    <form ng-if="customPluginForms.indexOf(plugin.name) < 0" class="form-horizontal">

        <div data-ng-if="!data.no_consumer" class="form-group">
            <label class="col-sm-4 control-label"><strong>consumer</strong></label>
            <div class="col-sm-7">
                <input
                        type="text"
                        ng-model="data.consumer_id"
                        class="form-control">
                <p class="help-block">
                    The CONSUMER ID that this plugin configuration will target.
                    This value can only be used if authentication has been enabled
                    so that the system can identify the user making the request.
                    If left blank, the plugin will be applied to all consumers.
                </p>
            </div>
        </div>

        <div class="form-group" ng-class="{'has-error' : errors[key]}" data-ng-repeat="(key,value) in data.fields">
            <label class="col-sm-4 control-label"><strong>{{humanizeLabel(key)}}</strong></label>
            <div class="col-sm-7">
                <div ng-switch on="value.type">
                    <div ng-switch-when="table">
                        <div data-ng-repeat="(key,data) in value.schema.fields" class="plugin-field-table margin-bottom">

                            <label>{{key}}</label>
                            <div data-ng-if="value.schema.flexible">
                                <button data-ng-click="removeField(value.schema.fields,key)" class="btn btn-sm btn-flat btn-danger" style="position: absolute;top: 0px;right: 15px">
                                    <i class="mdi mdi-close"></i>
                                </button>
                                <div class="row margin-top">

                                    <div class="col-md-4" data-ng-repeat="(k,v) in data.schema.fields">
                                        <input type="{{v.type}}" ng-model="v.value" class="form-control">
                                        <p class="help-block">{{k}}</p>
                                    </div>
                                </div>
                            </div>


                            <div data-ng-if="!value.schema.flexible">

                                <div ng-switch on="data.type">
                                    <div ng-switch-when="array">
                                        <chips ng-model="data.value">
                                            <chip-tmpl>
                                                <div class="default-chip">
                                                    {{chip}}
                                                    <i class="mdi mdi-close" remove-chip></i>
                                                </div>
                                            </chip-tmpl>
                                            <input chip-control/>
                                        </chips>
                                    </div>
                                    <div ng-switch-default>
                                        <input type="{{data.type}}" ng-model="data.value" class="form-control">
                                    </div>
                                    <div class="text-danger" ng-if="errors[key]" data-ng-bind="errors[key]"></div>
                                    <p class="help-block">{{data.help}}</p>
                                </div>
                            </div>

                        </div>
                        <!-- Start Monkey patch for response-ratelimiting plugin -->
                        <div data-ng-if="plugin.name === 'response-ratelimiting'">
                            <div class="input-group">
                                <input type="text"
                                       on-key-enter="addFlexField(value.schema.fields,value)"
                                       data-ng-model="value.flex_field"
                                       class="form-control"
                                       my-enter="doSomething()"
                                       placeholder="add an object to limit...">
                                <span class="input-group-btn">
                                    <button data-ng-click="addFlexField(value.schema.fields,value)" class="btn btn-primary" type="button">
                                        <i class="mdi mdi-plus"></i>
                                    </button>
                                </span>
                            </div>
                        </div>
                        <!-- End Monkey patch for response-ratelimiting plugin -->
                    </div>
                    <div ng-switch-when="string">
                        <div data-ng-if="value.enum">
                            <select class="form-control" ng-model="value.value" ng-options="x for x in value.enum">
                            </select>
                        </div>
                        <div data-ng-if="!value.enum">
                            <!--<input type="text" ng-model="value.value" class="form-control">-->
                            <textarea ng-model="value.value" class="form-control"></textarea>
                        </div>
                    </div>
                    <div ng-switch-when="array">
                        <chips ng-model="value.value">
                            <chip-tmpl>
                                <div class="default-chip">
                                    {{chip}}
                                    <i class="mdi mdi-close" remove-chip></i>
                                </div>
                            </chip-tmpl>
                            <input chip-control/>
                        </chips>
                        <p class="help-block">Tip: Press <code>Enter</code> to accept a value.</p>
                    </div>
                    <div ng-switch-when="select">
                        <select class="form-control"  ng-model="value.value">
                            <option  ng-repeat="item in units" ng-value="item">{{item}}</option>
                        </select>
                    </div>
                    <div ng-switch-when="boolean">
                        <input
                                bs-switch
                                ng-model="value.value"
                                switch-size="small"
                                type="checkbox"
                                switch-on-text="YES"
                                switch-off-text="NO"
                                ng-change="updateApi(api)"
                        >

                    </div>
                    <div ng-switch-when="file">
                        <!--<input type="file"-->
                               <!--ngf-select ng-model="value.value" name="value.value"-->
                        <!--/>-->
                        <!--<br>-->
                        <p class="text-primary">
                            To change the certificates you must remove the plugin and add it again
                        </p>
                        <pre>{{value.value}}</pre>
                    </div>
                    <div ng-switch-default>
                        <input type="{{value.type}}" ng-model="value.value" class="form-control">

                    </div>
                    <div class="text-danger" ng-if="errors[key]" data-ng-bind="errors[key]"></div>
                    <p class="help-block">{{value.help}}</p>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-4 col-sm-7">
                <button type="button" data-ng-disabled="busy" class="btn btn-primary btn-block" ng-click="updatePlugin()">
                    <i class="mdi mdi-check" ng-if="!busy"></i>
                    <fading-circle-spinner class="spinner spinner-invert pull-left" ng-if="busy"></fading-circle-spinner>
                    submit changes
                </button>
            </div>
        </div>
    </form>
    <div ng-if="customPluginForms.indexOf(plugin.name) > -1" data-ng-include="'js/app/plugins/forms/' + plugin.name + '.html?r=' + Date.now()"></div>
</div>